import React, { useState, useEffect, useCallback, FC, useRef } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Menu, Layout, Tree, Empty, Spin } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'
import menus, { getMenu } from '@/config/menu'
import MyIconFont from '@/components/common/myIconfont'
import { getKeyName, flattenRoutes } from '@/assets/js/publicFunc'
import logo from '@/assets/img/logo.png'
import * as actions from '@/store/actions'
import styles from './Menu.module.less'
import './index.less'
import BIReportData from './bidata'

const { SubMenu } = Menu
const { TreeNode } = Tree
const { Header, Footer, Sider, Content } = Layout
interface Props extends ReduxProps {}

type MenuType = CommonObjectType<string>
const Webview: FC<Props> = ({ storeData: {} }) => {
  const { pathname } = useLocation()
  const [url, seturl] = useState('')
  const [treeData, settreeData] = useState([])
  const [loading, setLoading] = useState(false)
  const iframeRef = useRef<any>(null)
  useEffect(() => {
    try {
      console.log(`pathname${pathname}`)
      let newpathname = pathname.replace('/admin','')
      settreeData(BIReportData[newpathname])
    } catch (error) {
      console.log(error)
    }
  }, [])
  const onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info)
    console.log(info.node.url)
    const newUrl = info.node.url
    if (newUrl) {
      seturl(newUrl)
    } else {
      seturl('')
    }
    // window.open(newUrl,'addFileWindow','toolbar=no,location=no,resizable=no');
  }
  const iframeLoad = () => {
    setLoading(true)
    console.log(iframeRef)
  }

  useEffect(() => {
    if (url) {
      iframeLoad()
    }
  }, [url])
  const titleRender = (nodeData) => {
    if (nodeData.children && nodeData.children.length > 0) {
      return <div>{nodeData.title}</div>
    }
    if (nodeData.url) {
      return <div>{nodeData.title}</div>
    }
    return <div className={'none'}>{nodeData.title}(无)</div>
  }
  const load = () => {
    setLoading(false)
  }
  return (
    <div className="home" style={{ padding: 20 }}>
      <div className="biWrap">
        <div className="biTree">
          <Tree
            defaultExpandedKeys={['0-0-0']}
            onSelect={onSelect}
            treeData={treeData}
            titleRender={titleRender}
          />
        </div>
        <div className="bicontent">
          {url == '' ? (
            <Empty description="请选择报表" />
          ) : (
            <iframe
              onLoad={load}
              ref={iframeRef}
              style={{
                width: '100%',
                height: '100%',
                display: loading ? 'none' : 'block',
                overflowY: 'auto',
                margin: 0,
                border: '0'
              }}
              src={url}
            />
          )}
          <Spin spinning={loading} />
        </div>
      </div>
    </div>
  )
}

export default connect(
  (state) => state,
  actions
)(Webview)
